<template>
	<view class='car'>
		<search></search>
		<view class='content'>
			<view class='shops'>
				<view class="priceTotal dFlex jBetween_aCenter">
					<view class='count'>Cart <!-- <text>({{list.length}} items)</text> --></view>
					
				</view>
				<u-empty style="margin-bottom: 20px;" :text='$t("car.empty")' v-if='!list.length' mode="car"
					icon="/static/images/car.jpg"></u-empty>
				<view class='list' v-else>
					<view class="shopOne" v-for="(item,index) in list" :key='index'>
						<div class='shop_content dFlex jStart_aStart' @click="goDetail(item)">
							<view class='shopImg imgPublic'>
								<image :src="item.image" mode="widthFix"></image>
							</view>
							<view class='shopInfo'>
								<view class='shopName'>{{item.goods_name}}</view>
								<view class='shopName' style="color: #666;">{{item.spec_key_name}}</view>
								<view class='shopName' style="font-size: 12px;">{{item.unit}}</view>
								<view class='shopPrice dFlex jStart_aCenter'>
									<view class='newPrice'>SAR<text>{{item.goods_price}}</text></view>
									<view class='oldPrice'>{{item.market_price}}</view>
								</view>
								<!-- 优惠券 -->
								<!-- <view class="quan dFlex jStart_aCenter" v-if="coupon.money">
									<view class='quanIcon imgPublic'>
										<image src="../static/images/coupon.png" mode="widthFix"></image>
									</view>
									<text>{{$t('car.extra_reduce')}} {{coupon.money}} SAR</text>
								</view> -->
							</view>
						</div>
						<div class="shopBtns dFlex jAround_aCenter">
							<u-number-box @change="changeNumber" :name="index" size='mini'
								v-model="item.goods_num"></u-number-box>
							<u-button iconColor='#7e859b' class='del' @click="deleteCart(item)" :text="$t('car.delete')"
								size='small' icon="trash"></u-button>
							<u-button @click="addFavorite(item)" iconColor='#7e859b' :text="$t('car.add_Wish')"
								v-if="item.is_collect==1" size='small' icon="heart-fill"></u-button>
							<u-button v-else @click="addFavorite(item)" iconColor='#7e859b' :text="$t('car.add_Wish')"
								size='small' icon="heart"></u-button>
						</div>
					</view>
				</view>
			</view>
			
			<view class="orderTotal">
				<!-- <view class="title">{{$t('car.extra_reduce')}}</view> -->
				<view class='total_content'>
					<view class="total_line dFlex jBetween_aCenter">
						<view class='line_title'>{{$t('car.subtotal')}} </view>
						<view class='line_val'>SAR {{order_amount}}</view>
					</view>
					<view class="total_line dFlex jBetween_aCenter">
						<view class='line_title'>{{$t('car.vat')}} </view>
						<view class='line_val'>{{vat}}%</view>
					</view>
					<view class="total_line dFlex jBetween_aCenter">
						<view class='line_title'>{{$t('account.coupon')}}</view>
						<view class='line_val' @click='showCoupon()'>
							
							<text style="color:#7e859b" v-if="coupon&&coupon.money">
								{{$t('car.save')}} SAR {{coupon.money}}
							</text>
							<text style="color:#7e859b" v-else>
								{{$t('car.choose_coupon')}}
							</text>
						</view>
					</view>
					<view class="total_line dFlex jBetween_aCenter total">
						<view class='line_title'>{{$t('car.total')}}</view>
						<view class='line_val'>SAR {{total_amount}}</view>
					</view>
				</view>
			</view>
			<view class="classify1" v-if="goods.length>0">
				<view class="kind_title">{{$t('car.lookFor')}}</view>
				<view class="kind_list">
					<view class="shopOne" v-for="(item,index) in goods" @click="goDetail(item)" :key="index">
						<view class="shopImg imgPublic">
							<image :src="item.image" mode="widthFix"></image>
							<view class="tools dFlex jBetween_aCenter">
								<view class="carIcon dFlex jCenter_aCenter" @click.stop="addFavorite(item)">
									<u-icon name="../static/images/xinyuan1.png" size='20px' v-if="item.is_collect==1"></u-icon>
									<u-icon name="../static/images/xinyuan.png" size='20px' v-else></u-icon>
								</view>
								<view class="carIcon dFlex jCenter_aCenter" @click.stop="addCart(item)">
									<u-icon name="../static/menu5_1.png" size='20px'></u-icon>
								</view>
							</view>
						</view>
						<view class='shopInfo'>
							<view class="shopName">{{item.goods_name}}</view>
							<view class='shopName' style="font-size: 12px;">{{item.unit}}</view>
							<view class="shopPrice dFlex jStart_aCenter">
								<view class='newPrice'>SAR {{item.shop_price}}</view>
								<view class='oldPrice'>{{item.market_price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠券列表 -->
		<view class='zz dFlex flexDirection jEnd_aCenter' v-if='couponDialog'>
			<view class='coupon'>
				<view class="title dFlex jBetween_aCenter">
					<u-icon name="photo" style="visibility: hidden;"></u-icon>
					<view class='showTit'>{{$t('account.coupon')}}</view>
					<u-icon name="close-circle" @click='couponDialog=false'></u-icon>
				</view>
				<view class='couponList'>
					<view class='couponOne' v-for="(item,index) in couponList" :key='index'>
						<view class="amount dFlex jStart_aCenter">
							<view class='cpIcon imgPublic'>
								<image src="../static/images/coupon.png" mode="widthFix"></image>
							</view>
							<text>{{$t('car.save')}} {{item.money}} SAR</text>
						</view>
						<view class='cp_content' @click="handleCoupon(item)">
							<view class='cp_kind'>{{$t('account.full')}} SAR {{item.condition}} {{$t('account.reduce')}} SAR {{item.money}} {{$t('account.coupon')}}</view>
							<view class='btns dFlex jEnd_aCenter'>
								<u-button type="primary" size='small' style="color:#000;background-color: #f8e801;border:none;" :text="$t('car.use')"></u-button>
							</view>
						</view>
					</view>
					<u-empty v-if='!couponList.length' :text='$t("coupon.empty")' mode="data"></u-empty>
				</view>
			</view>
		</view>
		<view class='settle'>
			<u-button type="primary" class="maincolor" style="color:#000;background-color: #f8e801;border:none;"  :text="$t('car.settle')" @click='jiesuan'></u-button>
		</view>
		<pageBottom></pageBottom>
		<!-- 登录弹窗 -->
		<u-popup :show="loginDialog" mode="center">
			<login @close="loginDialog=false"></login>
		</u-popup>
	</view>
</template>

<script>
	import login from '@/components/login.vue';
	import search from '@/components/search.vue';
	import pageBottom from '@/components/pageBottom.vue';
	export default {
		components: {
			login,
			search,
			pageBottom
		},
		data() {
			return {
				loginDialog: false,
				header_top: getApp().globalData.header_top,
				header_height: getApp().globalData.header_height,
				couponDialog: false,
				coupon: {},
				order_amount: 0,
				coupon_amount: 0,
				couponList: [],
				list: [],
				goods: [],
				coupon_id:0,
				vat:0,
			};
		},
		onLoad() {
			for (var i = 0; i < 5; i++) {
				uni.setTabBarItem({
					index: i,
					text: this.$t(`tab.menu${i + 1}`),
				})
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('pages.car'),
			})
			this.init()
			
		},
		onPullDownRefresh() {
			this.init()
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		},
		computed: {
			total_amount() {
				let total = 0;
				if (this.list.length > 0) {
					this.list.forEach((item) => {
						total += item.goods_price * item.goods_num
					})
				}
				
				var f = parseFloat(total);  
				if (isNaN(f)) {  
					return f;  
				}  
				f = Math.round(total*100)/100; 
				this.order_amount=f;
				f=f*(100+this.vat)/100;
				f=f-this.coupon_amount;
				f=parseFloat(f.toFixed(2));
				this.total_amount=f;
				return f
			}
		},
		methods: {
			// 结算
			jiesuan() {
				if (!this.$user.isLogin()) {
					this.loginDialog = true
					return
				}
				
				if (this.list.length) {
					let cart = [];
					this.list.forEach((item) => {
						cart.push(item.id)
					})
					const cart_ids = cart.join(',')
					uni.navigateTo({
						url: './settlement?cart_ids=' + cart_ids + '&cid=' + this.coupon_id
					})
				} else {
					uni.showToast({
						title: this.$t('car.tips_title1'),
						icon: "none"
					})
				}
			},
			async init() {
				const result = await this.$api('/cart/index')
				this.list = result.cartList
				this.goods = result.recommend_goods
				this.vat = result.vat
				this.getCouponLists()
			},
			handleCoupon(item) {
				if (!this.$user.isLogin()) {
					this.loginDialog = true
					return
				}
				this.coupon_amount=item.money;
				this.coupon_id=item.id;
				this.coupon = item
				this.couponDialog = false
			},
			showCoupon() {
				this.getCouponLists()
				this.couponDialog = true
			},
			async getCouponLists() {
				
				const result = await this.$api('/user/couponlist', {
					page: 1,
					status: 0,
					total:this.total_amount
				})
				this.couponList = result.list
			},
			async addFavorite(item) {
				if (!this.$user.isLogin()) {
					this.loginDialog = true
					return
				}
				
				await this.$tools.addFavorite(item)
				this.init()
			},
			async changeNumber(e) {
				const val = e.value
				const index = e.name
				await this.$api('/cart/changeNum', {
					id: this.list[index].id,
					num: val
				})
				this.init()
			},
			async deleteCart(item) {
				const _this = this;
				uni.showModal({
					title: this.$t('account.tips_title1'),
					content: this.$t('car.tips_content1'),
					cancelText: this.$t("operateBtn.cancelBtn"),
					confirmText: this.$t("operateBtn.sureBtn"),
					success(res) {
						console.log('res', res)
						if (res.confirm) {
							_this.handleDelete(item)
						}
					}
				})
			},
			async handleDelete(item) {
				await this.$api('/cart/deletecart', {
					cart_ids: item.id
				})
				this.init()
			},
			async addCart(item) {
				if (!this.$user.isLogin()) {
					this.loginDialog = true
					return
				}
				
				await this.$tools.addCart(item)
				this.init()
			},
			goDetail(item) {
				uni.navigateTo({
					url: './goodDetail?id=' + item.goods_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.zz {
		// #ifdef H5
		padding-bottom: 50px;
		box-sizing: border-box;

		// #endif
		.coupon {
			width: 100%;
			background: #f7f7fa;

			.couponList {
				.couponOne {
					.cp_content {
						width: 100%;
						padding: 12px;
						box-sizing: border-box;

						.btns {
							margin-top: 10px;

							.u-button {
								width: 100px;
								background: $main;
								border-color: $main;
								color: white;
							}
						}
					}

					.amount {
						width: 100%;
						padding: 10px 12px;
						box-sizing: border-box;
						color: #38ae04;
						font-size: 13px;
						background: #eff9ec;
						font-weight: bold;

						.cpIcon {
							width: 15px;
							height: 15px;
							margin-right: 10px;
						}
					}

					width:100%;
					margin-bottom:12px;
					border-radius: 10px;
					background:white;
					overflow: hidden;
					border:2px solid #e2e5f1;
				}

				width:100%;
				height: 60vh;
				overflow: auto;
				padding: 12px;
				box-sizing: border-box;
			}

			.title {
				padding: 10px 12px;
				box-sizing: border-box;
				background: white;
			}
		}
	}

	.settle {
		width: 100%;
		padding: 8px;
		box-sizing: border-box;
		position: fixed;
		background: white;
		color:$main;
		z-index: 1;
		// #ifdef H5
		bottom: 50px;
		// #endif
		// #ifndef H5
		bottom: 0;
		// #endif
		left: 0;
	}

	.orderTotal {
		.total_content {
			width: 100%;

			.total_line {
				.green {
					color: #38ae04;
				}

				.line_title {
					font-size: 12px;
					color: #7e859b;
				}

				width:100%;
				font-size:12px;
				padding:6px 0;
			}

			.total {
				font-weight: bold;
				font-size: 16px;

				.line_title {
					font-size: 16px;
					color: #333333;
				}
			}
		}

		.title {
			font-weight: bold;
			font-size: 16px;
			margin-bottom: 5px;
		}

		width:100%;
		padding:12px;
		box-sizing: border-box;
		border-top: 10px solid #f7f7fa;
		border-bottom: 10px solid #f7f7fa;
	}

	.shops {
		.list {
			.shopOne {
				.shopBtns {
					.del {
						width: 180px;
						margin: 0 12px;
					}

					.u-button {
						color: #7e859b;
						border-radius: 5px;
					}

					margin-top:12px;
				}

				.shopInfo {
					.quan {
						.quanIcon {
							width: 10px;
							height: 10px;
							margin-right: 10px;
						}

						background:rgba(56, 174, 4, 0.05);
						width:100%;
						border: 1px dashed #38ae04;
						font-size:12px;
						border-radius: 5px;
						padding:4px 8px;
						color:#38ae04;
						box-sizing: border-box;
					}

					.shopPrice {
						.oldPrice {
							font-size: 12px;
							margin-left: 12px;
							color: #7e859b;
							text-decoration: line-through;
						}

						.newPrice {
							font-weight: bold;

							text {
								font-size: 16px;
								display: inline-block;
								margin-left: 5px;
							}
						}

						width:100%;
						margin:6px 0;
					}

					.shopName {
						width: 100%;
						display: -webkit-box;
						/* 设置为WebKit内核的弹性盒子模型 */
						-webkit-box-orient: vertical;
						/* 垂直排列 */
						-webkit-line-clamp: 2;
						/* 限制显示两行 */
						overflow: hidden;
						/* 隐藏超出范围的内容 */
						text-overflow: ellipsis;
						/* 使用省略号 */
					}

					width:calc(100% - 112px);
				}

				.shopImg {
					width: 100px;
					margin-right: 12px;
				}

				width:100%;
				padding:12px;
				box-sizing: border-box;
				border-bottom: 5px solid #f7f7fa;
			}

			width:100%;
			border-bottom: 10px solid #f7f7fa;
		}

		.priceTotal {
			.count {
				text {
					display: inline-block;
					margin-left: 5px;
					font-weight: 400;
					font-size: 12px;
					color: #7e859b;
				}
			}

			font-weight: bold;
			width:100%;
			padding:10px 12px;
			box-sizing: border-box;
			border-top: 10px solid #f7f7fa;
			border-bottom: 10px solid #f7f7fa;
		}

		width:100%;
	}

	.classify1 {
		width: 100%;
		margin-top: 12px;

		.kind_title {
			width: 100%;
			padding: 0 12px;
			box-sizing: border-box;
			// color:#404553;
			color: $main;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.kind_list {
			.shopOne {
				.shopInfo {
					width: 100%;
					padding: 5px;
					box-sizing: border-box;
					
					.shopPrice {
						font-size: 12px;

						.oldPrice {
							margin-left: 12px;
							color: #7e8598;
							font-size: 10px;
							text-decoration: line-through;
						}
					}

					.shopName {
						font-size: 13px;
						width: 128px;
						overflow: hidden;
						white-space: pre-wrap;
						word-wrap: break-word;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						margin-bottom: 5px;
					}
				}

				.shopImg {
					width: 100%;
					position: relative;

					.tools {
						width: calc(100% - 24px);
						position: absolute;
						right: 12px;
						bottom: 12px;

						.carIcon {
							width: 24px;
							height: 24px;
							padding: 2px;
							box-sizing: border-box;
							background: white;
							border-radius: 4px;
							text-align: center;
							line-height: 20px;
							box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
						}
					}
				}

				width: 130px;
				margin-right: 10px;
				box-sizing: border-box;
				display:inline-block;
				vertical-align: top;
			}

			width:100%;
			padding:0 12px;
			font-size: 16px;
			box-sizing: border-box;
			white-space: nowrap;
			overflow: hidden;
			margin-bottom: 10px;
			overflow-x: scroll;
		}

		/* .kind_list::-webkit-scrollbar{
			height:0;
		} */
	}

	.car {
		padding-bottom: 106px;
	}

	page {
		background: white;
	}
</style>